<template>
  <div class="all">
    <div :style="bgimg" class="mine-nav" @click="ToLogin">
      <div class="mine-nav-inf">
     <img v-show="!$store.state.loginstate" class="mine-img" src="@/assets/images/mine/mine.png" alt="">
     <img v-show="$store.state.loginstate" class="mine-img" src="@/assets/images/logo.png" alt="">
     <p v-show="!$store.state.loginstate" class="mine-name">登录/注册</p>
     <p v-show="$store.state.loginstate" class="mine-name">你好，{{ $store.state.account}} 欢迎回来</p>
    </div>
    </div>
    <div class="mine-order">
      <div class="order">我的订单</div>
      <div class="order" @click="$router.push({path:'/order'})">全部订单 <van-icon name="arrow" /></div>
    </div>
    <div class="mine-icon">
      <div class="mine-icon-all"><img class="mine-icon-img" src="@/assets/images/mine/pay.png" alt="">
        <p>待付款</p>
      </div>
      <div class="mine-icon-all"><img class="mine-icon-img" src="@/assets/images/mine/car.png" alt="">
        <p>待收货</p>
      </div>
      <div class="mine-icon-all"><img class="mine-icon-img" src="@/assets/images/mine/set.png" alt="">
        <p>退换修</p>
      </div>
    </div>
    <div class="mine-under">
      <div class="mine-under-icon"><img src="@/assets/images/mine/center.png"> <img src="@/assets/images/mine/wallet.png"></div>
      <div class="mine-under-con">
         <div class="mine-under-content">会员中心 <van-icon name="arrow" /></div>
          <div class="mine-under-contenttwo" >我的优惠 <van-icon name="arrow" /></div>
        </div>
    </div>
    <div class="mine-under">
      <div class="mine-under-icon"><img src="@/assets/images/mine/fuwu.png"> <img src="@/assets/images/mine/mihome.png"></div>
      <div class="mine-under-con">
         <div class="mine-under-content">服务中心 <van-icon name="arrow" /></div>
          <div class="mine-under-contenttwo" >小米之家 <van-icon name="arrow" /></div>
        </div>
    </div>
    <div class="mine-under">
      <div class="mine-under-icon"><img src="@/assets/images/mine/F.png"> <img src="@/assets/images/mine/gift.png"></div>
      <div class="mine-under-con">
         <div class="mine-under-content">我的F码 <van-icon name="arrow" /></div>
          <div class="mine-under-contenttwo" >礼物码兑换 <van-icon name="arrow" /></div>
        </div>
    </div>
    <div class="mine-under" style="height: 20vw;">
      <div class="mine-under-icon"><img src="@/assets/images/mine/setting.png"></div>
      <div class="mine-under-con">
         <div v-show="!$store.state.loginstate" class="mine-under-content">设置<van-icon name="arrow" /></div>
         <div v-show="$store.state.loginstate" @click="exitaccount" class="mine-under-content">退出登录<van-icon name="arrow" /></div>
        </div>
      </div>
      <div style="margin-bottom: 20px;"></div>
   
  </div>
</template>

<script>
const url = require("@/assets/images/mine/BG.png")
import { Toast } from "vant";
export default {
    data(){
      return{
        bgimg:{
          backgroundImage:"url("+ url +")"
        },
      }
    },
    methods:{
      ToLogin(){
        if(!this.$store.state.loginstate)
        this.$router.push({
            path:'login'
           })
      },
      exitaccount(){
        this.$store.commit("changeLoginstate",false)
        Toast("已退出账号")
      }
    }
}
</script>

<style lang="scss" scoped>
.all {
  background: #f2f2f2;
}
.mine-nav{
  background: #f37d0f;
  height: 22vw;
  position: relative;
  .mine-nav-inf{
    display: flex;
    align-items: center;
    column-gap: 3vw;
    position: absolute;
    top: 20%;
    left: 8%;
    .mine-img{
        border-radius: 50% 50%;
        width: 13vw;
        height: auto;
    }
    .mine-name{
      color: #fff;
    font-size: .24rem;
    text-align: left;
    }
  }
}
.mine-order{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
    height: 2.8rem;
    border-bottom: 1px solid rgba(0,0,0,.15);
    color: rgba(0,0,0,.54);
    .order{
      margin: 0 4%;
      
    }
}
.mine-icon{
  display: flex;
  justify-content: space-around; 
  font-size: 10px;
  background: white;
  align-items: center;
  height: 25vw;
  .mine-icon-all{
    display: flex;
    flex-direction: column;
    align-items: center;
    .mine-icon-img{
    width: 8vw;
    height: auto;
  }
  }
  

}
.mine-under{
  background: white;
  margin-top: 3vw;
  display: flex;
  height: 30vw;
  .mine-under-icon{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: auto;
    margin-left: 5px;
  }
  .mine-under-content{
    width: 85vw;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,.15);
    padding-bottom: 10px;
    margin-left: 6px;
  }
  .mine-under-contenttwo{
    width: 85vw;
    display: flex;
    justify-content: space-between;
    margin-left: 6px;
  }
  .mine-under-con{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
</style>